/*
 * @Author: nainaiyi s15037075861@163.com
 * @Date: 2022-10-18 15:05:23
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-10-21 08:58:48
 * @FilePath: \demo\src\pages\Detail\bdIndex.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
// import React, { Component } from 'react'
// import { useParams } from "react-router-dom"
// import { Row, Col, Button } from 'antd'
// import { getbdDetail } from "../../api/live"
// import "./index.css"

// export const withParams = (Component) => {
//     return (props) => <Component {...props} params={useParams()} />;
// };

// class BdIndex extends Component {
//     constructor() {
//         super()
//         this.state = {
//             data: {}
//         }
//     }
//     componentDidMount() {
//         this.fetch_data()
//     }
//     async fetch_data() {
//         const res = await getbdDetail("/getbdDetail", {
//             id: this.props.params.id,
//         })
//         this.setState({
//             data: res.data.results,
//         })
//         console.log(res.data)
//     }
//     render() {
//         return (
//             <div>1</div>
//             // <div className='bdDetail'>
//             //     <div className='bdDetail-top'>
//             //         <Row>
//             //             <Col span={8}><div className='bdDetail-item'>{this.state.data.name}直播间</div></Col>
//             //             <Col span={8}><div className='bdDetail-item'>{this.state.data.title}</div></Col>
//             //             <Col span={8}></Col>
//             //         </Row>
//             //     </div>
//             //     <div className='bdDetail-main'>
//             //         <div className='bdDetail-left'>
//             //             <div className='bdDetail-box'>
//             //                 <p><span>当前观看人数 ：</span>{this.state.data.views}</p>
//             //                 <p><span>当前关注人数 ：</span>{this.state.data.focus}</p>
//             //                 <p><span>当前点赞人数 ：</span>{this.state.data.praises}</p>
//             //                 <p><span>当前下单人数 ：</span>{this.state.data.buys}</p>
//             //             </div>
//             //         </div>
//             //         <div className='bdDetail-right'>
//             //             <div className='bdDetail-img'>
//             //                 <img src={this.state.data.img} alt="" />
//             //             </div>
//             //             <div className='bdDetail-btn'>
//             //                 <Button>返回</Button>
//             //                 <Button>强制关闭</Button>
//             //             </div>
//             //         </div>

//             //     </div>
//             // </div>
//         )
//     }
// }
// export default withParams(BdIndex)


import React ,{ useEffect,useState } from 'react'
import { getbdDetail,httpGetLive } from '../../api/live'
import { useLocation } from 'react-router-dom'
import { Row, Col, Button } from 'antd'
import './index.css'
 const Detail=()=> {
     const location = useLocation()
     const [data,setData]=useState([]);
    useEffect(()=>{
        getData()
        console.log(location,data)
    },[])

    const getData= async ()=>{
        const res = await httpGetLive('/live');
        console.log(res.data)
        setData(res.data.results.filter(v => v.id == location.search[4]))
    }

     const onReturn = () => {
         window.history.back()
     }
  return (
      <div className='bdDetail'>
       
          {
              data && data.map((item, index) => {
                  return (
                      <div key={index}>
                          <div className='bdDetail-top'>
                              <Row>
                                  <Col span={8}><div className='bdDetail-item'>{item.name}直播间</div></Col>
                                  <Col span={8}><div className='bdDetail-item'>{item.title}</div></Col>
                                  <Col span={8}></Col>
                              </Row>
                          </div>
                          <div className='bdDetail-main'>
                              <div className='bdDetail-left'>
                                  <div className='bdDetail-box'>
                                      <p><span>当前观看人数 ：</span>{item.lookPerson}人</p>
                                      <p><span>当前关注人数 ：</span>{item.focus}人</p>
                                      <p><span>当前点赞人数 ：</span>{item.zan}人</p>
                                      <p><span>当前下单人数 ：</span>{item.buy}人</p>
                                  </div>
                              </div>
                              <div className='bdDetail-right'>
                                  <div className='bdDetail-img'>
                                      <img src={item.img} alt="" />
                                  </div>
                                  <div className='bdDetail-btn'>
                                      <Button onClick={onReturn}>返回</Button>
                                      <Button>强制关闭</Button>
                                  </div>
                              </div>

                          </div>
                      </div>
                  )
              })
          }
      </div>
  )
}
export default Detail;